<template>
  <div
    class="login-page flexbox flex-tb flex-center bg-center bg-no-repeat max-lg:bg-[url(https://cd.sealmg.com/assets/img/mobile/login-page-bg.png)] lg:bg-[url(https://cd.sealmg.com/assets/img/login-page-bg.png)] z-[1000] bg-cover !w-screen !h-screen"
  >
    <div class="login-header">
      <FnNav rightPath="/register" />
    </div>
    <!-- <img
      class="page-bg pc-page-bg object-cover"
      src="https://cd.sealmg.com/assets/img/login-page-bg.png"
      alt="Desktop login background"
      title="Desktop login page background"
    /> -->
    <!-- <img
      class="page-bg mobile-page-bg object-cover"
      src="https://cd.sealmg.com/assets/img/mobile/login-page-bg.png"
      alt="Mobile login background"
      title="Mobile login page background"
    /> -->
    <div class="login-box flexbox">
      <img
        class="box-bg object-cover"
        src="https://cd.sealmg.com/assets/img/login-box-bg.png"
        alt="Login form background"
        title="Login container background"
      />
      <div class="left z-10 flex-1">
        <NuxtLink :to="localePath('/')">
          <div class="title flexbox flex-align-center">
            <!-- <div class="icon"></div>
                        <div class="text">{{ $t("login.title") }}</div> -->
            <img class="img object-cover" src="https://cd.sealmg.com/assets/img/logo-img1.png" alt="SEALMG logo" title="SEALMG company logo" />
          </div>
        </NuxtLink>
        <div class="desc">
          <div class="text1">{{ $t('login.welcomeText') }}</div>
          <div class="text2">{{ $t('login.welcomeDesc') }}</div>
        </div>
        <div class="handle">
          <div class="flexbox flex-align-center">
            <!-- Lange langTheme="gray" :onlyLange="false" /> -->
            <Langes class="" langTheme="gray" :showArrow="true" key="2" />
            <NuxtLink :to="localePath('/register')">
              <div class="btn register-btn flexbox flex-center">
                <span class="text">{{ $t('formBtn.register') }}</span>
              </div>
            </NuxtLink>
          </div>
          <!-- <div class="time">
                        <span class="link" @click="golink">{{initData.beian||""}}</span>
                    </div> -->
        </div>
      </div>
      <div class="right">
        <h1 class="title capitalize">{{ $t('login.formTitle') }}</h1>
        <div class="form">
          <el-form label-position="top" label-width="80px" :model="form">
            <el-form-item :label="$t('formItem.email')">
              <el-input v-model="form.email" type="email" :placeholder="$t('formPlaceholder.input')">
                <img
                  slot="prefix"
                  class="input-icon"
                  src="https://cd.sealmg.com/assets/img/email-icon.png"
                  alt="Email input icon"
                  title="Email field indicator"
                />
              </el-input>
            </el-form-item>
            <!-- <NuxtLink :to="localePath('/reset-password')"> </NuxtLink> -->
            <nuxt-link class="forget" :to="localePath('/reset-password')">
              {{ $t('login.forgotPwd') }}
            </nuxt-link>
            <el-form-item :label="$t('formItem.password')">
              <el-input v-model="form.password" show-password :placeholder="$t('formPlaceholder.input')" @keyup.enter.native="submitLogin">
                <img
                  slot="prefix"
                  class="input-icon"
                  src="https://cd.sealmg.com/assets/img/pwd-icon.png"
                  alt="Password input icon"
                  title="Password field indicator"
                />
              </el-input>
            </el-form-item>
          </el-form>
          <el-button class="theme-btn one-line" :disabled="form.email && form.password ? false : true" :loading="btnLoading" @click="submitLogin">{{
            $t('formBtn.login')
          }}</el-button>
        </div>
        <other-login />
      </div>
    </div>
    <base-info />
  </div>
</template>
<script>
  import { throttle } from '@/static/js/common'
  import FnNav from '@/components/mobile/FnNav'
  export default {
    name: 'login',
    layout: 'default',
    components: {
      FnNav
    },
    head: {
      title: 'Log In - SEALMG',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'Log in to your SEALMG account to buy games, point cards, and recharges at more favorable prices.'
        }
      ]
    },
    data() {
      return {
        btnLoading: false, // 按钮加载状态
        form: {
          email: '', // 用户邮箱
          password: '' // 用户密码
        }
      }
    },
    computed: {
      // 使用命名空间获取初始化数据,增加代码可读性
      initData() {
        const { initData = {} } = this.$store.state.initData
        return initData
      }
    },
    created() {
      if (process.client) {
      }
    },
    methods: {
      //  跳转链接
      golink() {
        if (process.client) {
          window.open('https://beian.miit.gov.cn/#/Integrated/index')
        }
      },
      // 登录按钮点击事件
      submitLogin: throttle(
        async function () {
          // 检查表单数据是否完整
          if (!this.form.email || !this.form.password) {
            return
          }
          try {
            this.btnLoading = true
            const res = await this.$axios.post(`/api/user/login`, {
              account: this.form.email,
              password: this.form.password,
              vt: this.$cookies.get('uuid')
            })
            // 检查登录响应
            if (!res?.userinfo) {
              throw new Error('登录失败')
            }
            // 保存用户token
            this.$store.commit('user/setToken', res.userinfo.token || '')
            // 获取用户信息
            await this.$store.dispatch('user/getUserInfo')
            // 处理重定向
            const i18n_redirected = this.$cookies.get('i18n_redirected')
            const redirectUrl = this.$route.query.redirect || `/${i18n_redirected === 'en' ? '' : i18n_redirected}`
            // 重定向到目标页面
            window.location.href = redirectUrl
          } catch (error) {
            console.error('登录失败:', error)
            // this.$message.error("登录失败，请重试");
          } finally {
            this.btnLoading = false
          }
        },
        2000,
        {
          leading: true,
          trailing: false
        }
      )
    }
  }
</script>
<style lang="less" scoped>
  .login-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    .login-header {
      display: none;
    }
    .page-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100vh;
      z-index: -1;
    }
    .pc-page-bg {
      display: block;
    }
    .mobile-page-bg {
      display: none;
    }
    .login-box {
      width: 960px;
      height: 574px;
      box-sizing: border-box;
      overflow: hidden;
      // background: linear-gradient( 330deg, #FF8062 0%, #FF4029 100%);
      box-shadow: 0px 16px 32px 0px rgba(88, 26, 6, 0.16);
      border-radius: 32px;
      position: relative;
      .box-bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 960px;
        height: 574px;
        border-radius: 32px;
        z-index: -1;
        display: block;
      }
      .left {
        padding: 0 32px;
        height: 574px;
        .title {
          margin-top: 40px;
          .icon {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            background: @color-ff;
            border-radius: 4px;
          }
          .img {
            width: 157px;
            height: 46px;
            // background: @color-ff;
          }
          .text {
            font-family: Aemstel, Aemstel;
            font-weight: 400;
            font-size: 24px;
            color: @color-ff;
          }
        }
        .desc {
          margin-top: 75px;
          .text1 {
            margin-bottom: 16px;
            font-family: YouSheBiaoTiHei;
            font-size: 44px;
            color: @color-ff;
          }
          .text2 {
            max-width: 297px;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 14px;
            color: @color-ff;
          }
        }
        .handle {
          position: absolute;
          left: 32px;
          bottom: 32px;
          .register-btn {
            box-sizing: border-box;
            padding: 0 24px;
            height: 32px;
            margin-left: 16px;
            cursor: pointer;
            border-radius: 24px;
            border: 1px solid @color-ff;
            .text {
              font-weight: 500;
              font-size: 12px;
              color: @color-ff;
            }
          }
          .time {
            margin-top: 32px;
            font-weight: 400;
            font-size: 12px;
            color: @color-ff;
            .link {
              cursor: pointer;
            }
          }
        }
      }
      .right {
        width: 515px;
        height: 574px;
        box-sizing: border-box;
        background: @color-ff;
        border-radius: 32px;
        .title {
          margin-top: 72px;
          font-weight: 600;
          font-size: 24px;
          color: @font-color-26;
          text-align: center;
        }
        .form {
          margin-top: 32px;
          padding: 0 72px;
          .el-form-item {
            margin-bottom: 15px;
          }
          .el-form {
            position: relative !important;
          }
          .forget {
            position: absolute;
            right: 0;
            bottom: 54px;
            font-size: 12px;
            color: @theme-color;
            cursor: pointer;
          }
          /deep/ .el-form--label-top .el-form-item__label {
            font-weight: 500;
            font-size: 12px;
            color: @font-color-99;
            line-height: 20px;
            padding: 0;
            margin-bottom: 6px;
          }
          /deep/ .el-input__inner {
            color: @font-color-14;
          }
          /deep/ .el-input--prefix .el-input__inner {
            padding-left: 54px;
          }
          /deep/ .el-input__prefix {
            left: 12px;
          }
          .input-icon {
            width: 24px !important;
            height: 24px !important;
            //   position: absolute !important;
            //   top: 50% !important;
            //   transform: translateY(-50%) !important;
          }
          .theme-btn {
            width: 100%;
            margin-top: 9px;
          }
          /deep/ .el-input__prefix {
            @apply flex items-center;
          }
        }
      }
    }
  }
  @media only screen and (min-width: 1200px) {
  }
  @media screen and (max-width: 992px) and (min-width: 768px) {
    .login-page {
      justify-content: flex-start;
      .login-header {
        display: block;
      }
      .pc-page-bg {
        display: none;
      }
      .mobile-page-bg {
        display: block;
        width: 736px;
        left: 50%;
        transform: translateX(-50%);
      }
      .login-box {
        width: 768px;
        height: auto;
        box-sizing: border-box;
        overflow: hidden;
        box-shadow: none;
        position: relative;
        .box-bg {
          display: none;
        }
        .left {
          display: none;
        }
        .right {
          padding: 24px 16px;
          width: 768px;
          height: auto;
          box-sizing: border-box;
          background: transparent;
          .title {
            margin-top: 24px;
            color: @font-color-26;
            text-align: left;
          }
          .form {
            margin-top: 24px;
            padding: 0;
            .el-form-item {
              margin-bottom: 10px;
            }
            .theme-btn {
              height: 48px;
              margin-top: 14px;
            }
          }
        }
      }
      /deep/.base-info {
        margin-top: 18px;
        padding-bottom: 86px;
      }
    }
  }
  @media screen and (max-width: 767px) {
    .login-page {
      justify-content: flex-start;
      .login-header {
        display: block;
      }
      .pc-page-bg {
        display: none;
      }
      .mobile-page-bg {
        display: block;
        width: 343px;
        left: 50%;
        transform: translateX(-50%);
      }
      .login-box {
        width: 375px;
        height: auto;
        box-sizing: border-box;
        overflow: hidden;
        box-shadow: none;
        position: relative;
        .box-bg {
          display: none;
        }
        .left {
          display: none;
        }
        .right {
          padding: 24px 16px;
          width: 375px;
          height: auto;
          box-sizing: border-box;
          background: transparent;
          .title {
            margin-top: 24px;
            color: @font-color-26;
            text-align: left;
          }
          .form {
            margin-top: 24px;
            padding: 0;
            .el-form-item {
              margin-bottom: 10px;
            }
            .theme-btn {
              height: 48px;
              margin-top: 14px;
            }
          }
        }
      }
      /deep/.base-info {
        margin-top: 18px;
        padding-bottom: 86px;
      }
    }
  }
</style>
